/**
 *  This is free software licensed and distributed under 
 *  the terms and conditions of the 
 * GNU Lesser General Public License (LGPL) Version 3.0 .
 * 
 * http://www.gnu.org/licenses/lgpl.html
 *
 * @author Markus Kosmal
 */
package org.mko.html5.client.pyramid;

import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Widget;

/**
 * The Class Pyramid.
 * 
 * Just a little experiment with CSS 3D. You can add any item you want and
 * display it on a 3D pyramid.
 * 
 * 
 * @author kosmal
 */
public class Pyramid extends FlowPanel {

    /** The inner flow panel. */
    private final FlowPanel innerFlowPanel;

    /** The webkit css. */
    private final String css = "-webkit-transform-origin: 0 0;-webkit-transform-origin-x: 0px;-webkit-transform-origin-y: 0px;"
            + "-o-transform-origin: 0 0;-o-transform-origin-x: 0px;-o-transform-origin-y: 0px;" + "-moz-transform-origin: 0 0;-moz-transform-origin-x: 0px;-moz-transform-origin-y: 0px;"
            + "-ms-transform-origin: 0 0;-ms-transform-origin-x: 0px;-ms-transform-origin-y: 0px;" + "transform-origin: 0 0;transform-origin-x: 0px;transform-origin-y: 0px;";

    /** The default values. */
    private final int[] defaultValues = {0, -20, 360, -20 };

    /**
     * Instantiates a new pyramid.
     * 
     * @param firstItem
     *            the first item
     * @param secondItem
     *            the second item
     * @param thirdItem
     *            the third item
     * @param bottomItem
     *            the bottom item
     */
    public Pyramid(final Widget firstItem, final Widget secondItem, final Widget thirdItem, final Widget bottomItem) {
        this.innerFlowPanel = new FlowPanel();
        this.getElement().setAttribute(
                "style",
                "position: relative;margin: 100px auto;"
                        + "height: 500px;width: 100px;-webkit-transform-style: preserve-3d;-webkit-animation: spin 5s linear infinite;-webkit-transform-origin: -20px 0 10px;"
                        + "-o-animation: spin 5s linear infinite;-o-transform-origin: -20px 0 10px;-moz-animation: spin 5s linear infinite;"
                        + "-moz-transform-origin: -20px 0 10px;-ms-animation: spin 5s linear infinite;-ms-transform-origin: -20px 0 10px;"
                        + "animation: spin 5s linear infinite;transform-origin: -20px 0 10px;");

        this.innerFlowPanel.getElement().setAttribute("style", "position: absolute;border-color: transparent transparent transparent rgba(50, 50, 50, 0.5);");

        FlowPanel firstPanel = new FlowPanel();
        firstPanel.getElement().setAttribute(
                "style",
                "-webkit-transform:rotateY(-19.5deg);position: absolute;border-color: transparent transparent transparent rgba(50, 50, 50, 0.5);"
                        + "border-style: solid;border-radius: 3px;border-width: 200px 0 200px 346px;" + this.css
                        + "-moz-transform:rotateY(-19.5deg); -ms-transform:rotateY(-19.5deg); -o-transform:rotateY(-19.5deg);transform:rotateY(-19.5deg);");
        firstPanel.add(firstItem);

        FlowPanel secondPanel = new FlowPanel();
        secondPanel.getElement().setAttribute(
                "style",
                "-webkit-transform: rotateY(90deg) rotateZ(60deg);position: absolute;border-color: transparent transparent transparent rgba(50, 50, 50, 0.5);"
                        + "border-style: solid;border-radius: 3px;border-width: 200px 0 200px 346px;" + this.css
                        + "-o-transform: rotateY(90deg) rotateZ(60deg);-moz-transform: rotateY(90deg) rotateZ(60deg);"
                        + "-ms-transform: rotateY(90deg) rotateZ(60deg);transform: rotateY(90deg) rotateZ(60deg);");
        secondPanel.add(secondItem);

        FlowPanel thirdPanel = new FlowPanel();
        thirdPanel.getElement().setAttribute(
                "style",
                "-webkit-transform:rotateX(60deg) rotateY(19.5deg);position: absolute;border-color: transparent transparent transparent rgba(50, 50, 50, 0.5);"
                        + "border-style: solid;border-radius: 3px;border-width: 200px 0 200px 346px;" + this.css
                        + "-o-transform:rotateX(60deg) rotateY(19.5deg);-moz-transform:rotateX(60deg) rotateY(19.5deg);"
                        + "-ms-transform:rotateX(60deg) rotateY(19.5deg);transform:rotateX(60deg) rotateY(19.5deg);");
        thirdPanel.add(thirdItem);

        FlowPanel bottomPanel = new FlowPanel();
        bottomPanel.getElement().setAttribute(
                "style",
                "-webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px);"
                        + "-webkit-transform-origin: 0 0 -326px;position: absolute;border-color: transparent transparent transparent rgba(50, 50, 50, 0.5);"
                        + "border-style: solid;border-radius: 3px;border-width: 200px 0 200px 346px;" + this.css
                        + "-o-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px);"
                        + "-moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px);"
                        + "-o-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px);transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px);");

        this.add(firstPanel);
        this.add(secondPanel);
        this.add(thirdPanel);

        this.setAnimationParameters(this.defaultValues[0], this.defaultValues[1], this.defaultValues[2], this.defaultValues[2 + 1]);
    }

    /**
     * Sets the animation parameters.
     * 
     * @param rotateYStart
     *            the rotate y start
     * @param rotateXStart
     *            the rotate x start
     * @param rotateYEnd
     *            the rotate y end
     * @param rotateXEnd
     *            the rotate x end
     */
    public final void setAnimationParameters(final int rotateYStart, final int rotateXStart, final int rotateYEnd, final int rotateXEnd) {
        // Pyramid.createCSSAnimation(rotateYStart, rotateXStart, rotateYEnd,
        // rotateXEnd);
    }

    /**
     * Creates the css animation.
     * 
     * @param rotateYStart
     *            the rotate y start
     * @param rotateXStart
     *            the rotate x start
     * @param rotateYEnd
     *            the rotate y end
     * @param rotateXEnd
     *            the rotate x end
     */
    // private static native void createCSSAnimation(final int rotateYStart,
    // final int rotateXStart, final int rotateYEnd, final int rotateXEnd) /*-{
    // var style = document.createElement('style');
    // style.type = 'text/css';
    // style = '@-webkit-keyframes spin {from {-webkit-transform: rotateY('
    // + rotateYStart + 'deg) rotateX(' + rotateXStart
    // + 'deg);}to {-webkit-transform: rotateY(' + rotateYEnd
    // + 'deg) rotateX(' + rotateXEnd + 'deg);}}';
    // document.getElementsByTagName("head").item(0).appendChild(style);
    //
    // }-*/;
}
